<template>
  <v-dialog v-model="dialog" width="1200" class="dialogArea">
    <v-form v-model="valid">
      <v-container class="grey lighten-5 mb-6 formArea">
        <h2 class="title" style="">高级查询</h2>
        <!-- row1 -->
        <v-row align="center" no-gutters style="height: 50px">
          <v-col>
            <div class="inputArea">
              <span class="labelName">文件编号</span>
              <v-text-field
                v-model="form.fileNo"
                hide-details="auto"
                denseoutlined
                solo
                dense
                color="red"
                clearable
                @blur="$v.fileNo.$touch()"
              ></v-text-field>
            </div>
          </v-col>
          <v-col>
            <div class="inputArea">
              <span class="labelName">文件标题</span>
              <v-text-field
                v-model="form.fileTitle"
                hide-details="auto"
                denseoutlined
                solo
                dense
                color="red"
                clearable
                required
              ></v-text-field>
            </div>
          </v-col>
          <v-col>
            <div class="inputArea">
              <span class="labelName">文件类型</span>
              <v-select
                :items="items"
                v-model="form.fileType"
                label="请选择文件类型"
                solo
                class="select-class"
                dense
                clearable
              ></v-select>
            </div>
          </v-col>
        </v-row>

        <!-- row2 -->
        <v-row align="center" no-gutters style="height: 50px">
          <v-col>
            <div class="inputArea">
              <span class="labelName">电梯工号</span>
              <v-text-field
                v-model="form.eleNum"
                hide-details="auto"
                denseoutlined
                solo
                dense
                color="red"
                clearable
                required
              ></v-text-field>
            </div>
          </v-col>
          <v-col>
            <div class="inputArea">
              <span class="labelName">取号日期</span>

              <date-picker
                v-model="form.pickTime"
                type="date"
                range
                :lang="lang"
                placeholder="请选择日期"
              ></date-picker>
            </div>
          </v-col>
          <v-col>
            <div class="inputArea">
              <span class="labelName">取号人</span>
              <v-text-field
                v-model="form.pickPeople"
                hide-details="auto"
                denseoutlined
                solo
                dense
                color="red"
                clearable
                required
              ></v-text-field>
            </div>
          </v-col>
        </v-row>

        <!-- row3 -->
        <v-row align="center" no-gutters style="height: 50px">
          <v-col>
            <div class="inputArea">
              <span class="labelName">校对人</span>
              <v-text-field
                v-model="form.proofreader"
                hide-details="auto"
                denseoutlined
                solo
                dense
                color="red"
                clearable
                required
              ></v-text-field>
            </div>
          </v-col>
          <v-col>
            <div class="inputArea">
              <span class="labelName">审核人</span>
              <v-text-field
                v-model="form.fileNo"
                hide-details="auto"
                denseoutlined
                solo
                dense
                color="red"
                clearable
                required
              ></v-text-field>
            </div>
          </v-col>
          <v-col>
            <div class="inputArea">
              <span class="labelName">最新取号人</span>
              <v-text-field
                v-model="form.fileNo"
                hide-details="auto"
                denseoutlined
                solo
                dense
                color="red"
                clearable
                required
              ></v-text-field>
            </div>
          </v-col>
        </v-row>

        <!-- row4 -->
        <v-row align="center" no-gutters style="height: 50px">
          <v-col>
            <div class="inputArea">
              <span class="labelName">需求部门</span>
              <v-text-field
                v-model="form.fileNo"
                hide-details="auto"
                denseoutlined
                solo
                dense
                color="red"
                clearable
                required
              ></v-text-field>
            </div>
          </v-col>
          <v-col>
            <div class="inputArea">
              <span class="labelName">客户名称</span>
              <v-text-field
                v-model="form.fileNo"
                hide-details="auto"
                denseoutlined
                solo
                dense
                color="red"
                clearable
                required
              ></v-text-field>
            </div>
          </v-col>
          <v-col>
            <div class="inputArea">
              <span class="labelName">电梯台量</span>
              <v-text-field
                v-model="form.fileNo"
                hide-details="auto"
                denseoutlined
                solo
                dense
                color="red"
                clearable
                required
              ></v-text-field>
            </div>
          </v-col>
        </v-row>

        <!-- row5 -->
        <v-row align="center" no-gutters style="height: 50px">
          <v-col>
            <div class="inputArea">
              <span class="labelName">电梯台量</span>
              <v-text-field
                v-model="form.fileNo"
                hide-details="auto"
                denseoutlined
                solo
                dense
                color="red"
                clearable
                required
              ></v-text-field>
            </div>
          </v-col>
          <v-col>
            <div class="inputArea">
              <span class="labelName">内容提要</span>
              <v-text-field
                v-model="form.fileNo"
                hide-details="auto"
                denseoutlined
                solo
                dense
                color="red"
                clearable
                required
              ></v-text-field>
            </div>
          </v-col>
          <v-col>
            <div class="inputArea">
              <span class="labelName">方案标志</span>
              <v-text-field
                v-model="form.fileNo"
                hide-details="auto"
                denseoutlined
                solo
                dense
                color="red"
                clearable
                required
              ></v-text-field>
            </div>
          </v-col>
        </v-row>

        <!-- row6 -->
        <v-row align="center" no-gutters style="height: 50px">
          <v-col>
            <div class="inputArea">
              <span class="labelName">故障描述</span>
              <v-text-field
                v-model="form.fileNo"
                hide-details="auto"
                denseoutlined
                solo
                dense
                color="red"
                clearable
                required
              ></v-text-field>
            </div>
          </v-col>
          <v-col>
            <div class="inputArea">
              <span class="labelName">故障代码</span>
              <v-text-field
                v-model="form.fileNo"
                hide-details="auto"
                denseoutlined
                solo
                dense
                color="red"
                clearable
                required
              ></v-text-field>
            </div>
          </v-col>
          <v-col>
            <div class="inputArea">
              <span class="labelName">文件期限</span>
              <v-select
                :items="items"
                v-model="form.fileduration"
                label="请选择"
                solo
                class="select-class"
                dense
                clearable
              ></v-select>
            </div>
          </v-col>
        </v-row>

        <!-- row7 -->
        <v-row align="center" no-gutters style="height: 50px">
          <v-col>
            <div class="inputArea">
              <span class="labelName">密级</span>
              <v-text-field
                v-model="form.fileNo"
                hide-details="auto"
                denseoutlined
                solo
                dense
                color="red"
                clearable
                required
              ></v-text-field>
            </div>
          </v-col>
          <v-col>
            <div class="inputArea">
              <span class="labelName">相关编号</span>
              <v-text-field
                v-model="form.fileNo"
                hide-details="auto"
                denseoutlined
                solo
                dense
                color="red"
                clearable
                required
              ></v-text-field>
            </div>
          </v-col>
          <v-col>
            <div class="inputArea">
              <span class="labelName">合同号</span>
              <v-text-field
                v-model="form.fileNo"
                hide-details="auto"
                denseoutlined
                solo
                dense
                color="red"
                clearable
                required
              ></v-text-field>
            </div>
          </v-col>
        </v-row>

        <!-- row8 -->
        <v-row align="center" no-gutters style="height: 50px">
          <v-col>
            <div class="inputArea">
              <span class="labelName">关联文件</span>
              <v-text-field
                v-model="form.fileNo"
                hide-details="auto"
                denseoutlined
                solo
                dense
                color="red"
                clearable
                required
              ></v-text-field>
            </div>
          </v-col>
          <v-col class="columnCol">
            <div class="inputArea">
              <span class="labelName"> 适用类别 </span>
              <v-radio-group v-model="form.applyType" column>
                <v-radio label="操作指引类" value="1"></v-radio>
                <v-radio class="left10" label="管理类" value="2"></v-radio>
              </v-radio-group>
            </div>
          </v-col>
          <v-col>
            <div class="inputArea">
              <span class="labelName"> 适用部分 </span>
              <div class="checkboxArea">
                <v-checkbox
                  v-model="form.part"
                  label="机械部分"
                  value="1"
                ></v-checkbox>
                <v-checkbox
                  v-model="form.part"
                  label="电气部分"
                  value="2"
                ></v-checkbox>
              </div>
            </div>
          </v-col>
        </v-row>

        <!-- row9 -->
        <v-row align="center" no-gutters style="height: 50px">
          <v-col>
            <div class="inputArea">
              <span class="labelName"> 电梯种类 </span>
              <div class="checkboxArea">
                <v-checkbox
                  v-model="form.part"
                  label="直梯"
                  value="1"
                ></v-checkbox>
                <v-checkbox
                  v-model="form.part"
                  label="扶梯"
                  value="2"
                ></v-checkbox>
              </div>
            </div>
          </v-col>
          <v-col class="columnCol">
            <div class="inputArea">
              <span class="labelName"> 是否允许借阅 </span>
              <v-radio-group v-model="form.applyType" column>
                <v-radio label="允许" value="1"></v-radio>
                <v-radio class="left10" label="不允许" value="2"></v-radio>
              </v-radio-group>
            </div>
          </v-col>
          <v-col>
            <div class="inputArea">
              <span class="labelName">文件状态</span>
              <v-select
                v-model="form.filestatus"
                :items="items"
                label="请选择文件状态"
                solo
                class="select-class"
                dense
                clearable
              ></v-select>
            </div>
          </v-col>
        </v-row>

        <!-- row10 -->
        <v-row align="center" no-gutters style="height: 50px">
          <v-col>
            <div class="inputArea">
              <span class="labelName">发放日期</span>
              <date-picker
                v-model="form.issDate"
                type="date"
                :lang="lang"
                range
                placeholder="请选择日期"
              ></date-picker>
            </div>
          </v-col>
          <v-col>
            <div class="inputArea">
              <span class="labelName">文件标题</span>
              <v-text-field
                v-model="form.fileNo"
                hide-details="auto"
                denseoutlined
                solo
                dense
                color="red"
                clearable
                required
              ></v-text-field>
            </div>
          </v-col>
          <v-col> </v-col>
        </v-row>

        <!-- row10 -->
        <v-row align="center" no-gutters style="height: 40px">
          <v-col>
            <div class="inputArea">
              <span class="labelName"> 文件属性 </span>
              <div class="checkboxArea manycheck">
                <v-checkbox
                  v-for="(item, index) in fileprop.one"
                  :key="index"
                  v-model="form.fileprop"
                  :label="item"
                  :value="index"
                ></v-checkbox>
              </div>
            </div>
          </v-col>
        </v-row>
        <!-- row11 -->
        <v-row align="center" no-gutters style="height: 40px">
          <v-col>
            <div class="inputArea">
              <span class="labelName"> </span>
              <div class="checkboxArea manycheck">
                <v-checkbox
                  v-for="(item, index) in fileprop.two"
                  :key="index"
                  v-model="form.fileprop"
                  :label="item"
                  :value="index + 7"
                ></v-checkbox>
              </div>
            </div>
          </v-col>
        </v-row>

        <!-- row12 -->
        <v-row align="center" no-gutters style="height: 40px">
          <v-col>
            <div class="inputArea">
              <span class="labelName">阅读权限</span>
              <div class="checkboxArea manycheck">
                <v-checkbox
                  v-for="(item, index) in readPermission.one"
                  :key="index"
                  v-model="form.readPermission"
                  :label="item"
                  :value="index"
                ></v-checkbox>
              </div>
            </div>
          </v-col>
        </v-row>

        <!-- row13 -->
        <v-row align="center" no-gutters style="height: 40px">
          <v-col>
            <div class="inputArea">
              <span class="labelName"> </span>
              <div class="checkboxArea manycheck">
                <v-checkbox
                  v-for="(item, index) in readPermission.two"
                  :key="index"
                  v-model="form.readPermission"
                  :label="item"
                  :value="index + 6"
                ></v-checkbox>
              </div>
            </div>
          </v-col>
        </v-row>

        <!-- row14 -->
        <v-row align="center" no-gutters style="height: 40px">
          <v-col>
            <div class="inputArea">
              <span class="labelName"> </span>
              <div class="checkboxArea manycheck">
                <v-checkbox
                  v-for="(item, index) in readPermission.three"
                  :key="index"
                  v-model="form.readPermission"
                  :label="item"
                  :value="index + 12"
                ></v-checkbox>
              </div>
            </div>
          </v-col>
        </v-row>
        <footer class="footer">
          <v-btn depressed color="primary" @click="tosearch"> 查询 </v-btn>
        </footer>
      </v-container>
    </v-form>
  </v-dialog>
</template>

<script>
import DatePicker from "vue2-datepicker";
import "vue2-datepicker/index.css";

import { validationMixin } from "vuelidate";
import { required, maxLength } from "vuelidate/lib/validators";
import "vue2-datepicker/index.css";
import "vue2-datepicker/locale/zh-cn";
export default {
  components: { DatePicker },
  mixins: [validationMixin],
  validations: {
    fileNo: { required, maxLength: maxLength(10) },
  },
  data() {
    return {
      lang: {
        formatLocale: {
          firstDayOfWeek: 1,
        },
        monthBeforeYear: false,
      },
      fileprop: {
        one: ["质量", "安装", "调试", "验收", "检查", "故障检测", "维修改造"],
        two: ["保养", "安全", "培训", "开发项目", "规章制度", "出口对应"],
      },
      readPermission: {
        one: [
          "全国质量技术",
          "全国安装体系",
          "全国调试体系",
          "全国检验体系",
          "全国保养体系",
          "全国改造体系",
        ],
        two: [
          "全国培训体系",
          "全国安全体系",
          "全国研发体系",
          "全国制造体系",
          "全国安装网点",
          "全国特约保养",
        ],
        three: ["海外公司", "工程总部质量技术体系", "全国产品品证体系"],
      },
      items: ["Foo", "Bar", "Fizz", "Buzz"],
      form: {
        fileNo: "",
        fileTitle: "",
        fileType: "",
        eleNum: "",
        pickTime: "",
        pickPeople: "",
        proofreader: "",
        issDate: "",
        applyType: null,
        part: [],
        fileprop: [],
        readPermission: [],
        fileduration: "",
        filestatus: "",
      },
      nameRules: [
        (v) => !!v || "Name is required",
        (v) => v.length <= 10 || "Name must be less than 10 characters",
      ],
      valid: false,
      dialog: false,
    };
  },
  computed: {
    any() {
      if (this.form.readPermission.length > 3) {
        console.log(this.form.readPermission);
        this.$v.$reset();
      }
      return false;
    },
    nameErrors() {
      const errors = [];
      if (!this.$v.fileNo.$dirty) return errors;
      !this.$v.fileNo.maxLength &&
        errors.push("Name must be at most 10 characters long");
      !this.$v.fileNo.required && errors.push("Name is required.");
      return errors;
    },
  },
  watch: {
    form: {
      handler(val, oldval) {
        console.log(val, oldval);
        if (this.form.readPermission.length > 3) {
          console.log(this.form.readPermission, this.$v);
        }
      },
      deep: true,
    },
  },
  methods: {
    tosearch() {
      this.dialog = !this.dialog;
    },
  },
};
</script>

<style lang="scss">
.formArea {
  // 表单样式 start
  padding: 20px 50px;
  .inputArea {
    display: flex;
    span.labelName {
      line-height: 32px;
      display: inline-block;
      width: 100px;
      text-align: left;
    }
    .v-input__slot {
      width: 220px;
    }
    .v-messages__message {
      line-height: 32px;
    }
    .v-input__slot {
      max-height: 32px !important;
    }
    .v-input.select-class {
      height: 32px;
    }
    .mx-datepicker.mx-datepicker-range {
      width: 220px;
    }
    .mx-input {
      border: 2px solid #eee;
      &:hover {
        border-color: #eee;
      }
    }
  }
  .v-input.v-input--has-state {
    max-height: 32px;
  }

  .columnCol {
    //   div[role="radiogroup"] {
    //     flex-direction: column !important;
    //   }
    .inputArea {
      height: 32px;
      //     margin-top: 15px;
      //     .v-input__slot {
      //       height: 46px !important;
      //       max-height: unset !important;
      //     }
      //      span.labelName {
      //        line-height: 45px;
      //      }

      .left10 {
        margin-left: 10px !important;
      }
    }
  }
  .checkboxArea {
    .v-input__slot {
      width: 125px;
    }
    display: flex;
  }
  .manycheck {
    .v-input__slot {
      width: auto !important;
      margin-right: 10px !important;
    }
  }
  .footer {
    margin-top: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  // end
}
</style>
